<!-- 课程审核
修改人：张家豪
时间：2020/6/23 -->
<template>
    <div class="about">
        <div>
            <el-form ref="searchForm" :model="searchForm" :inline="true" label-width="80px">
                <el-col :xl="6" :md="8" :sm="24">
                    <el-form-item label="课程名称" prop="courseName">
                        <el-input placeholder="请输入课程名称" v-model="searchForm.courseName" clearable></el-input>
                    </el-form-item>
                </el-col>

                <el-col :xl="6||24" :md="8||24" :sm="24">
                    <el-form-item>
                        <div :style=" { float: 'right', overflow: 'hidden' } || {} ">
                            <el-button icon="el-icon-search" type="primary" @click="search">搜索</el-button>
                            <el-button class="ml-5" icon="el-icon-refresh-left" @click="reset">重置</el-button>
                        </div>
                    </el-form-item>
                </el-col>
            </el-form>
        </div>

        <!-- 审核 -->
        <div>
            <el-button type="primary" plain @click="en_disables(1)">批量通过</el-button>
            <el-button type="primary" plain @click="en_disables(0)">批量否决</el-button> 
        </div>

         <page-table @load-table-data="loadTableData" ref="dataTable" @selection-change="selection" row-key="id">
            <template slot="tb-columns">
                <el-table-column align="center" prop="avatarUrl" label="课程封面">
                    <template slot-scope="scope">
                        <img :src="scope.row.avatarUrl" width="80" height="80" />
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="teacher" label="申请教师"></el-table-column>
                <el-table-column align="center" prop="courseType" label="课程类别"></el-table-column>
                <el-table-column align="center" prop="courseName" label="课程名称"></el-table-column>
                <el-table-column align="center" prop="courseDescription" label="课程描述"></el-table-column>
                <el-table-column align="center" prop="createTime" label="申请时间"></el-table-column>
                 <el-table-column fixed="right" align="center" width="120" label="审核状态">
                     <template slot-scope="scope">
                            <el-link :underline="false" type="primary" @click.native="en_disable(scope.row.id,2)"
                                v-if="scope.row.status==2" disabled>待审核</el-link>
                     </template>
                 </el-table-column>
                 <el-table-column fixed="right" align="center" width="180" label="操作">
                     <template slot-scope="scope">
                         <el-button type="primary" @click.native="en_disable(scope.row.id,1)"  round>通过</el-button>
                          <el-divider direction="vertical"></el-divider>
                         <el-button type="danger"  @click.native="en_disable(scope.row.id,0)"  round>否决</el-button>
                         
                     </template>
                 </el-table-column>

            </template>
        </page-table>
        <!-- 弹出添加的窗口 -->
        <Edit :visible='visible' :title='title' :defaultFormData='defaultFormData' v-if='visible' @close='close' />

    </div>
</template>



<script>
    import PageTable from '@/components/common/PageTable'
    import {applypage,updateUseful} from '@/api/modules/create_class'
    import Edit from '@/views/teacher/create_class/class_edit'
    // import About from './about'
    export default {
        name: "create_class",
        components: {
            PageTable,
            Edit
        },
        data() {

            return {
                searchForm: {
                    name: ''
                },
                multipleSelection: [],
                visible: false,
                username: '',
                defaultFormData: {}
            };
        },

        methods: {
            en_disable(id, status) {
                updateUseful({
                    ids: id,
                    status: status
                }).then(res => {
                    this.toast(res.message)
                    this.$refs.dataTable.loadTableData('reload')
                }).catch(err => {
                    this.toast(err, 2)
                    this.$refs.dataTable.loadTableData('reload')
                })
            },
            en_disables(status) {
                let ids = [];
                this.multipleSelection.forEach(item => {
                    ids.push(item.id)
                })
                updateUseful({
                    ids: ids.join(','),
                    status: status
                }).then(res => {
                    this.toast(res.message)
                    this.$refs.dataTable.loadTableData('reload')
                }).catch(err => {
                    this.toast(err, 2)
                    this.$refs.dataTable.loadTableData('reload')
                })
            },

            close(val) {
                this.visible = false
                if (val) {
                    this.$refs.dataTable.loadTableData('reload')
                }
            },

            add() {
                this.visible = true
                this.title = '申请课程'
                this.defaultFormData = {}
            },

            edit(row) {
                //console.log(row)
                this.visible = true
                this.title = '编辑'
                this.defaultFormData = row
            },

            stateFormat(row) {
                if (row.sex === 1) {
                    return '男'
                } else {
                    return '女'
                }
            },

            loadTableData(filter, callback) {
                filter = {
                    ...filter,
                    ...this.searchForm
                }
                applypage(filter).then(res => {
                    this.total = res.data.total
                    // console.log(this.total)
                    let tableData = {
                        ...res.data,
                        data: res.data.records

                    }
                    callback(tableData)

                })
            },
            selection(val) {
                this.multipleSelection = val;
            },
            search() {
                this.$refs.dataTable.loadTableData('reload')
            },
            reset() {
                this.$refs.searchForm.resetFields()
                this.$refs.dataTable.loadTableData('reload')
            },


        }
    };
</script>
